import React from "react";
import { Row, Col, Card, Statistic, Progress, Table } from "antd";
import { ArrowUpOutlined, ArrowDownOutlined } from "@ant-design/icons";
import "./index.less";

const Analysis: React.FC = () => {
  const columns = [
    {
      title: "排名",
      dataIndex: "rank",
      key: "rank",
      width: 80,
    },
    {
      title: "搜索关键词",
      dataIndex: "keyword",
      key: "keyword",
    },
    {
      title: "用户数",
      dataIndex: "users",
      key: "users",
      sorter: (a: any, b: any) => a.users - b.users,
    },
    {
      title: "周涨幅",
      dataIndex: "growth",
      key: "growth",
      render: (text: string) => {
        const isUp = text.startsWith("+");
        return (
          <span
            style={{ color: isUp ? "#52c41a" : "#f5222d" }}
            data-oid="x-7:i1h"
          >
            {isUp ? (
              <ArrowUpOutlined data-oid="oojn-xr" />
            ) : (
              <ArrowDownOutlined data-oid="z_ezbp5" />
            )}
            {text}
          </span>
        );
      },
    },
  ];

  const data = [
    {
      key: "1",
      rank: 1,
      keyword: "搜索关键词1",
      users: 1234,
      growth: "+12%",
    },
    {
      key: "2",
      rank: 2,
      keyword: "搜索关键词2",
      users: 1000,
      growth: "-5%",
    },
  ];

  return (
    <div className="pro-analysis" data-oid="w:l.zue">
      <Row gutter={[24, 24]} data-oid=":dyqrdw">
        <Col span={6} data-oid="xyqgq8l">
          <Card data-oid="ra0znco">
            <Statistic
              title="总销售额"
              value={112893}
              precision={2}
              valueStyle={{ color: "#3f8600" }}
              prefix="¥"
              suffix={<ArrowUpOutlined data-oid="g-bnr_f" />}
              data-oid=".0gf6un"
            />

            <div className="pro-statistic-footer" data-oid="bx4jipc">
              <span data-oid="-dq:z9r">周同比 12%</span>
              <span data-oid="-4-vn_j">日同比 11%</span>
            </div>
          </Card>
        </Col>
        <Col span={6} data-oid="8fjmypt">
          <Card data-oid="3.96-1k">
            <Statistic
              title="访问量"
              value={8846}
              valueStyle={{ color: "#cf1322" }}
              suffix={<ArrowDownOutlined data-oid="hr7run1" />}
              data-oid="fj0hb-9"
            />

            <div className="pro-statistic-footer" data-oid="as17mx_">
              <span data-oid="hi:v-cn">周同比 12%</span>
              <span data-oid="r29lhwp">日同比 11%</span>
            </div>
          </Card>
        </Col>
        <Col span={6} data-oid="na6hyyp">
          <Card data-oid="s48kr:x">
            <Statistic
              title="订单量"
              value={1234}
              valueStyle={{ color: "#3f8600" }}
              suffix={<ArrowUpOutlined data-oid="etb_8yq" />}
              data-oid="l:u8ach"
            />

            <div className="pro-statistic-footer" data-oid="hohwzjr">
              <span data-oid="v2ix78k">周同比 12%</span>
              <span data-oid="d_8-tmz">日同比 11%</span>
            </div>
          </Card>
        </Col>
        <Col span={6} data-oid="-fzi4zx">
          <Card data-oid="r.om5wl">
            <Statistic
              title="新增用户"
              value={567}
              valueStyle={{ color: "#3f8600" }}
              suffix={<ArrowUpOutlined data-oid="1fcml2n" />}
              data-oid="64gpvll"
            />

            <div className="pro-statistic-footer" data-oid="pjz44h7">
              <span data-oid="76ldcko">周同比 12%</span>
              <span data-oid="s15xiit">日同比 11%</span>
            </div>
          </Card>
        </Col>
      </Row>

      <Row gutter={[24, 24]} style={{ marginTop: 24 }} data-oid="-:6rzz-">
        <Col span={16} data-oid="pt7l5hl">
          <Card title="销售趋势" className="pro-card" data-oid="38pnjd-">
            <div className="pro-chart" data-oid="hnmruxw">
              <div className="pro-chart-placeholder" data-oid="9gzp_d5">
                销售趋势图表
              </div>
            </div>
          </Card>
        </Col>
        <Col span={8} data-oid="-.gdw.c">
          <Card title="任务完成情况" className="pro-card" data-oid="bh4v-6s">
            <div className="pro-progress-list" data-oid="qmv_sk.">
              <div className="pro-progress-item" data-oid="bo0rhfk">
                <span data-oid="zebjbli">目标1</span>
                <Progress percent={88} size="small" data-oid="131q-:7" />
              </div>
              <div className="pro-progress-item" data-oid=":20h6pd">
                <span data-oid="9i-xpxh">目标2</span>
                <Progress percent={66} size="small" data-oid="bw1fntn" />
              </div>
              <div className="pro-progress-item" data-oid="azlzquw">
                <span data-oid="lkczvwz">目标3</span>
                <Progress percent={100} size="small" data-oid="myj.m.g" />
              </div>
            </div>
          </Card>
        </Col>
      </Row>

      <Row gutter={[24, 24]} style={{ marginTop: 24 }} data-oid="5il2t0l">
        <Col span={24} data-oid=".gizc7c">
          <Card title="搜索关键词" className="pro-card" data-oid="yuymuhd">
            <Table
              columns={columns}
              dataSource={data}
              pagination={false}
              size="middle"
              data-oid="9r09e1k"
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Analysis;
